<template>
  <section class="login_box">
    <div class="header">
      <h4>小米有品账号注册</h4>
    </div>

    <div class="main">
        <div class="inpBox">
          <input
            type="text"
            placeholder="用户名"
            v-model='username'
          />
        </div>
        <div class="inpBox">
          <input
            type="text"
            placeholder="手机号码"
            v-model='account'
          />
        </div>
        <div class="inpBox">
          <input
            type="text"
            placeholder="短信验证码"
            class='short'
            v-model='code'
          />

          <a
            :class={noClick:isRun}
            @click='sendCode'
          >
            {{isRun ? `${runTime}S后重新获取` : `获取验证码`}}
          </a>
        </div>
        <div class="inpBox">
          <input
            type="password"
            placeholder="密码"
            v-model='password'
          />
        </div>
        <div class="inpBox">
          <input
            type="password"
            placeholder="支付密码"
            v-model='passwordPay'
          />
        </div>
      <button
        class="submit"
        @click='handleRegister'
      >
        立即注册
      </button>
      
    </div>

    <div class="register">
      <router-link to="/login">已有账号，去登录</router-link>
    </div>

    <div class="footer">
      <span>首页</span>|<span>简体</span>|<span>English</span>|<span>常见问题</span>|<span>隐私政策</span>
    </div>
  </section>
</template>
<script>
// @ is an alias to /src
import {getCode,checkCode,register} from '@/api/api'
export default {
  name: "register",
  data() {
    return {
        username:'',
        account:'',
        code:'',
        password:'',
        passwordPay:'',
        isRun:false,
        runTime:30,
    };
  },
  methods: {
    sendCode(){
      if(!this.account){
        this.$toast('手机号必填');
        return 
      }
      if(this.isRun)return;
        // 先获取当前电脑时间 在当前时间的基础上加30秒 算出 结束时间
        // 倒计时 不采用--的方式  采用 当前时间到目标时间的描述
        this.isRun = true;
        this.timer = setInterval(() => {
          this.runTime --;
          if(this.runTime == 0){
            clearInterval(this.timer)
            this.isRun = false;
            this.runTime = 30
          }
        }, 1000);
        getCode(this.account)
    },
    async checkCode(){
      //校验 验证码是否正确
      let flag = await checkCode({phone:this.account,code:this.code}).then(data=>{
        // console.log(data)
        return data.code == 0
      })
      return flag;
    },
    async handleRegister(){
      // 调用注册接口之前  先去 发送验证码 再去校验 验证码
      // 然后才能调用注册接口
      if(!this.username||!this.account||!this.code||!this.passwordPay||!this.passwordPay){
        this.$toast('所有项必填');
        return 
      }
      let flag = await this.checkCode();
      if(flag){
        // 调用注册接口
        register({
          name:this.username,
          phone:this.account,
          passwordPay:this.passwordPay,
          password:this.password
        }).then(data=>{
          if(data.code==0){
            this.$dialog.alert({
              message: '恭喜注册成功'
            }).then(()=>{
              this.$router.replace('/login')
            })
          }
        })
      }
    }
  },
  components: {}
};
</script>
<style lang="less">
@import url('../assets/login.less');
</style>